<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link href="../css/mui.picker.css" rel="stylesheet" />
  <link href="../css/mui.poppicker.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="../css/timecheck.css" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <style>
    .mui-content{
      border-top: 1px solid transparent;
    }
    .actDetailsBox{
      width: 100%;
      background-color: white;
    }
    .actDetailsBox>div{
      padding: 0.1rem 0.1rem 0.05rem 0.3rem;
      border-bottom: 1px solid #ccc;
      overflow: hidden;
    }
    .actDetailsBox p{
      margin-bottom: 0.02rem;
      color:black;
      font-size: 0.22rem;
    }

    .actName{
      height: 0.6rem;
      width: 90%;
      margin: 0.2rem auto 0;
      line-height: 0.6rem;
      border-radius: 0.3rem;
      text-align: center;
      background-color: #BAEA85;
      color:white;
      border: 1px black  dotted;
    }
    .storeChoose{
      width:100%;
      font-size: 0.22rem;
      text-align: center;
      overflow: hidden;
      padding: 0.25rem 3%;
      /*background-color:#F7F7F7;*/
      overflow: hidden;
    }
    .storeChoose span{
      display: inline-block;
      width: 33%;
      padding: 0.06rem 0;
      float: left;
      border: 1px solid #ccc;
      font-size: 0.2rem;
      background-color:white;
    }
    .storeChoose span:nth-child(2){
      border-right: none;
      border-left: none;
    }
    .storeChoose .default{
      background-color: #ccc;
    }

    table {
      font-size: 0.22rem;
      width: 100%;
      text-align: center;
      margin-top: 0.1rem;
      background-color:#E6E6E6;
    }
    table tr td {
      height: 0.8rem;
      display: inline-block;
      line-height: 0.8rem;

    }
    table,tbody,td div{
      text-align: center;
      font-size: 0.2rem;
    }
    td span{
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    .table-box{
      width: 100%;
      font-size: 0.2rem;
      text-align: center;
      padding-bottom: 1rem;
    }
    .tab-head {
      width: 100%;
      background-color: #FFFFFF;
      line-height: 0.5rem;
    }
    .light {
      color: #8e8a8a;
    }
    .bglight {
      background-color: #FFFFFF;
    }


    .dataHeader {
      width: 100%;
      background-color: white;
      padding: 0.2rem 0;
      overflow: hidden;
    }
    .setMeal ,.openCard{
      background-color: #F9F9F9;
      width: 48%;
      float: left;
      border-radius: 0.2rem;
      text-align: center;
      padding: 0.05rem 0 0.1rem;
    }
    .setMeal{
      margin:0 2% 0 1%;
    }
    .setMeal p ,.openCard p{
      margin: 0.05rem 0 0;
      font-size: 0.22rem;
      color:black;
    }
    .setMeal>p:first-child ,.openCard>p:first-child{
      font-size: 0.26rem;
    }
    .setMeal>p:nth-child(2) ,.openCard>p:nth-child(2){
      font-size: 0.22rem;
    }
    .floatDiv{
      width: 100%;
      padding: 0.05rem 0 ;
      overflow: hidden;
      margin-top: 0.1rem;
    }
    .floatDiv .floatItem{
      width: 50%;
      float: left;
    }
    .floatDiv>div:first-child{
      border-right: 1px solid #ccc;
    }
    .floatDiv .floatItem p{
      margin: 0 0 0.05rem 0;
    }

    .tableDiv{
      width: 100%;
      font-size: 0.22rem;
      background-color: #EEEEEE;
      padding-bottom: 1rem;
    }
    .tableItem{
      padding-top: 0.2rem;
    }
    .mealName{
      display: inline-block;
      width: 100%;
      height: 0.5rem;
      line-height: 0.5rem;
      background-color: white;
      color:#ED7D31;
      padding-left: 0.2rem;
    }
    .triangle{
      display: inline-block;
      border-bottom: 0.5rem solid transparent;
      border-left: 0.5rem solid transparent;
      border-right: 0.5rem solid #EEEEEE;
      position: absolute;
      top:-1px;
      left: 2rem;
    }
    .titleData{
      width: 3.4rem;
      height: 0.5rem;
      line-height: 0.5rem;
      position: absolute;
      top:-1px;
      left: 3rem;
      background-color: #EEEEEE;
      text-align: right;
    }
    .titleData span{
      display: inline-block;
      margin-right: 0.1rem;
    }
    .mealDetail{
      width: 100%;
      background-color: #F7F7F7;
      padding-top: 0.2rem;
      margin-top: 0.05rem
    }
    .mealDetail .name{
      width: 70%;
      margin: 0 auto;
      background-color: white;
      color:#ED7D31;
      text-align: center;
      padding: 0.05rem 0;
      border-radius: 0.3rem;

    }

  </style>
</head>

<body>
<div id="app" class="mui-content">
  <div style="position: fixed;top:0;width: 100%;z-index: 9999">
    <p class="actName">{{actDetail.actName}}</p>
    <div class="storeChoose" >
    <div style="width: 100%;margin:0 17% ;overflow: hidden;">
      <span @click="choose(1)" :class="{default:chooseType ===1}" >活动详情</span>
      <span @click="choose(2)" :class="{default:chooseType ===2}" style="border:1px solid #ccc" >活动报告</span>
    </div>
  </div>
  </div>
  <div style="padding-top: 1.8rem">
    <!--活动详情数据-->
    <div v-show="chooseType ===1">
      <!--活动详情-->
      <div class="actDetailsBox">
        <div>
          <p>{{actType === 1 ? '会员卡.超值首充活动' : actType === 2 ? '会员卡.优惠充值活动' : actType === 3 ? '会员卡.免费福利活动' : ''}}</p>
        </div>
        <div>
          <p>有效期：{{actDetail.actDates}}</p>
          <p style="float: left">活动时间：{{actDetail.actTime}}</p>
          <p style="float: right;margin-right: 0.1rem">{{actDetail.yzxDay}}</p>
        </div>
        <div>
          <p>适用玩家：{{actDetail.cardName}}</p>
          <p>参与限制：{{actDetail.limitType}}</p>
        </div>
        <div >
          <p>
            人次限制：{{actDetail.limitTotal === -1 ? '无限制' : (actDetail.limitTotal+'人次')}}
          </p>
        </div>
        <div style="border-bottom: none;padding-bottom: 0.1rem" >
          <p >
            包含福利：{{actDetail.coin ? actDetail.coin : 0}}枚游戏币，{{actDetail.score ? actDetail.score : 0 }}积分，{{actDetail.diamond ? actDetail.diamond:0}}钻石
          </p>
        </div>
      </div>
    </div>
    <!--活动销售报告-->
    <div v-show="chooseType ===2">


      <div v-show="Number(actState) !==1">
        <!---->
        <div class="dataHeader" >
          <div class="setMeal" style="padding-bottom: 0.3rem">
            <p> <strong>活动赠送</strong> </p>

            <div class="floatDiv">
              <div class="floatItem" style="width: 33.33%" >
                <p>游戏币</p>
                <p>{{actReport.coin}}</p>
              </div>
              <div class="floatItem" style="width: 33.33%;border-right: 1px solid #ccc" >
                <p>积分</p>
                <p>{{actReport.score}}</p>
              </div>
              <div class="floatItem" style="width: 33.33%" >
                <p>钻石</p>
                <p>{{actReport.diamond}}</p>
              </div>
            </div>
          </div>
          <div class="openCard" style="padding-bottom: 0.3rem">
            <p> <strong>领取情况</strong></p>

            <div class="floatDiv">
              <div class="floatItem">
                <p>参与人数</p>
                <p>{{actReport.peopleNum}}人</p>
              </div>
              <div class="floatItem">
                <p>领取次数</p>
                <p>{{actReport.receiveNum}}次</p>
              </div>
            </div>
          </div>
        </div>
        <!---->
        <div style="width: 100%;background-color: white;margin-top: 0.1rem">

          <div >
            <div style="overflow: hidden;margin-top: 0.1rem">
              <div id="mealranking" style="width: 6.4rem;height:5rem;"></div>
            </div>
            <div class="table-box" style="padding-bottom: 1rem">
              <table style="width: 100%">
                <tr class="tab-head ">
                  <td style="width:15%">日期</td>
                  <td style="width:15%" class="light">参与人数</td>
                  <td style="width:15%" class="light">领取笔数</td>
                  <td style="width:15%" >游戏币</td>
                  <td style="width:15%" >积分</td>
                  <td style="width:20%" >钻石</td>
                </tr>
                <tr v-for="(item,index) in actReport.rewardDay" :key="index"  :class="{bglight:index%2===1}" >
                  <td style="width:15%">{{(item.dateNo+'').replace(/^(\d{4})(\d{2})(\d{2})$/, '$2'+'月'+'$3'+'日') }}</td>
                  <td style="width:15%" class="light">{{item.peopleNum}}</td>
                  <td style="width:15%" class="light">{{item.receiveNum}}</td>
                  <td style="width:15%" >{{item.coin}}</td>
                  <td style="width:15%" >{{item.score}}</td>
                  <td style="width:20%" >{{item.diamond}}</td>
                </tr>
              </table>
              <p v-show="actReport.rewardDay.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
                暂无数据
              </p>
            </div>
          </div>

        </div>
      </div>

      <div v-show="Number(actState) ===1">
        <p style="width: 100%;font-size: 0.26rem;text-align: center;height: 2rem;line-height: 2rem">活动尚未开始</p>
      </div>

    </div>
  </div>

</div>
<script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../common/timeCheck.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../config.js"></script>
<script type="text/javascript">
  mui.init()
  var vm = new Vue({
    el: '#app',
    data: function() {
      return{
        storeName:'',
        storeId:'',
        fromDate:'',
        toDate:'',
        dateType:'',
        actnum:'',
        actType:'',
        actId:'',
        actState:'',
        currentShopObj:'',
        chooseType:1,   //1.活动详情 2.活动报告
        dataList:[],   //销售总览列表
        //
        mealOptions: {
          title: {
            subtext: '营收赠送价值对比',
            left: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 500
            }
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 12
            },
          },
          legend: {
            bottom:10,
            data:['总赠送价值','本活动赠送价值','本活动参与人数'],
          },
          feature: {
            dataView: {
              show: true,
              readOnly: false
            }
          },
          calculable: true,
          grid: {
            left: '2%',
            right: '5%',
            bottom: '14%',
            top: '20%',
            containLabel: true,
            borderColor: '#e2e2e2'
          },
          xAxis: {
            data: [1,2],
            splitLine:{
              show:false,
            },
            axisLabel: {
              interval:0,
              rotate:40,
              fontSize:10
            },
            textStyle: {
              color: '#ED7D31',
              fontSize: '8px'
            }
          },
          yAxis:[
            {
              name:'赠送价值',
              type:'value',
              max:50,
              splitLine: {
                show:false,
                lineStyle: {
                  // 使用深浅的间隔色  
                  color: ['#4472C4'],
                  type:'dotted'
                }
              },
            },
            {
              name:'人数',
              type:'value',
              max:10,
              splitLine: {
                show:true,
                lineStyle: {
                  // 使用深浅的间隔色  
                  color: ['#b1b1b1'],
                  type:'dotted'
                }
              },
            }
          ],
          series: [{
            name: '总赠送价值',
            type: 'bar',
            data: [10,20,30,40,50,60,70,80,90,100],
            itemStyle:{
              normal:{color:"#DC9470"},
            }
          },{
            name: '本活动赠送价值',
            type: 'bar',
            data: [10,20,30,40,50,60,70,80,90,100],
            itemStyle:{
              normal:{color:"#E0645D"},
            }
          },{
            name: '本活动参与人数',
            type: 'line',
            yAxisIndex: 1,
            data: [10,20,30,40,50,60,70,80,90,100],
            itemStyle:{
              normal:{color:"#749F83"},
            }
          }]
        },
        //活动详情
        actDetail:{},
        cardList:[],  //该门店所以卡信息
        actReport:{
          rewardDay:[]
        }, //活动报告

      }
    },

    mounted: function() {
      var vm = this;
      mui.plusReady(function() {
        vm.receiveParams();
        vm.getCardList();
      });
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId;
        this.storeName = sf.storeName;
        this.fromDate = sf.fromDate;
        this.toDate = sf.toDate;
        this.dateType = sf.dateType;
        this.actnum = sf.actnum;
        this.actType = sf.actType;
        this.actId = sf.actId;
        this.actState = sf.actState;
      },
      choose:function(type){
        if(type !== this.chooseType){
          this.chooseType=type;
          vm.initCharts()
        }
      },
      initCharts: function() {
        var vm = this;
        var mealRanking = echarts.init(document.getElementById('mealranking'))
        mealRanking.setOption(vm.mealOptions,true)
      },
      //获取活动详情
      getActDetail:function(){
        var vm=this;
        config.ajax({
          url:'/act/getRewardDetails',
          data:{
            "storeId":vm.storeId,
            "actId":vm.actId,
          },
          success: function(res){
            console.log(JSON.stringify(res))
            if(res.result===1){
              vm.actDetail=res.rewardDetails;
              vm.actDetail.cardName=vm.getCardName(res.rewardDetails.actCardNo)
              vm.getActReport();
            }else{
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
      //获取门店所以卡信息
      getCardList:function(){
        var vm=this;
        config.ajax({
          url:'/activity/getRewardCardGrade',
          data:{
            "storeId":vm.storeId,
          },
          success: function(res){
            if(res.result ===1){
//              console.log(JSON.stringify(res))
              vm.cardList=res.cardName;
              vm.getActDetail();
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
      //cardId转化为cardName
      getCardName:function(cardList){
        var  vm=this;
        var nameObj='';
        cardList.forEach(function(item,index){
          vm.cardList.forEach(function(item2,index2){
            if( Number(item) === Number(item2.cardGradeId) ){
              nameObj += (item2.vipCardName+',')
            }
          })
        });
        return nameObj
      },
      //获取活动报告
      getActReport:function(){
        var  vm=this
        config.ajax({
          url:'/act/getRewardActReport',
          data:{
            "storeId":vm.storeId,
            "actId":vm.actId,
            "startTime":vm.actDetail.startTime,
            "endTime":vm.actDetail.endTime,
          },
          success: function(res){
            if(res.result===1){
              console.log(JSON.stringify(res))
              vm.actReport=res.rewardActReport;
              var moneyMax=0,peopleMax=5;
              vm.mealOptions.xAxis.data=[],vm.mealOptions.series[0].data=[],vm.mealOptions.series[1].data=[],vm.mealOptions.series[2].data=[];
              vm.actReport.rewardValue.forEach(function(item,index){
                vm.mealOptions.xAxis.data.push((item.dateNo+'').replace(/^(\d{4})(\d{2})(\d{2})$/, '$2'+'月'+'$3'+'日'));
                vm.mealOptions.series[0].data.push((item.totalValue/100).toFixed(2));
                vm.mealOptions.series[1].data.push((item.benActValue/100).toFixed(2));
                vm.mealOptions.series[2].data.push(item.peopleNum);
                if(Number(item.totalValue/100) >moneyMax ){
                  moneyMax=Number(item.totalValue/100)
                }
                if( Number(item.peopleNum) > peopleMax){
                  peopleMax=item.peopleNum
                }
              });
              vm.mealOptions.yAxis[0].max=moneyMax;
              vm.mealOptions.yAxis[1].max=peopleMax;
              if(vm.actReport.rewardValue.length < 11){
                vm.mealOptions.series[0].barWidth=10;
                vm.mealOptions.series[1].barWidth=10;
              }

              vm.initCharts();
            }else{
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      }

    },
    watch: {

    }
  });
</script>
</body>

</html>